<template>
  <div class="el-card__body">
    <avue-crud
      :option="options"
      :data="tableData"
      :page.sync="page"
      :table-loading="loading"
      :before-open="beforeOpen"
      @on-load="getList"
      @row-update="handleUpdate"
      @row-del="handleDel"
      @row-save="handleSave"
      @refresh-change="refreshChange"
    >
      <template slot="img_url" slot-scope="scope">
        <ImagePreview
          :imageUrl=" scope.row.img_url"
        />
      </template>
      <template slot="img_urlForm" slot-scope="scope">
        <UploadImg
          :img_url="
            isEdit ? scope.row.img_url : ''
          "
          @getImgs="getImgs"
        />
      </template>
      <template slot="status" slot-scope="scope">
        <el-switch
          v-model="scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </template>
      <template slot="statusForm" slot-scope="scope">
        <el-switch
          v-model="scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </template>
    </avue-crud>
  </div>
</template>
  <script>
import { getList, edit, save, del } from "@/API/projectCate";
import { options } from "@/options/projectCates";
import { error, success, confirm, info } from "@/utils/message";
import { formatDate } from "@/utils/index";
import ImagePreview from "@/components/ImagePreview";
import UploadImg from "@/components/uploadImg";
export default {
  components: { ImagePreview, UploadImg },
  data() {
    return {
      loading: false,
      options: options,
      tableData: [],
      isEdit: true,
      page: {
        pageSize: 10,
      },
      imgId: "",
    };
  },
  methods: {
    //获取用户列表
    async getList(page) {
      this.loading = true;
      try {
        let paprms = {
          page: page.currentPage,
          limit: page.pageSize,
        };
        let { data } = await getList(paprms);
        this.tableData = data.list;
        this.page.total = data.total;
        setTimeout(() => {
          this.loading = false;
        }, 300);
      } catch (err) {
        this.loading = false;
        error(`${err}`);
      }
    },
    
    // 编辑项目
    async handleUpdate(row, index, done, loading) {
      try {
        if(this.img_url){
          row.img_url = this.img_url;
        }
        await edit(row);
        this.$message.success("修改成功");
        this.refreshChange();
        done();
      } catch (error) {
        done();
        this.$message.error(error);
      }
    },
    async handleDel(row) {
      try {
        await confirm("此操作将永久删除该用户, 是否继续?", "提示");
        await del(row._id);
        success("删除成功");
        this.refreshChange();
      } catch (err) {
        info(`${err}`);
      }
    },
    async handleSave(row, index, done, loading){
      try {
        if (this.img_url) {
          row.img_url = this.img_url;
        }
        if(row.status == ''){
          row.status=true
        }
        await save(row);
        this.$message.success("新增成功");
        done();
        this.refreshChange();
      } catch (error) {
        done();
        this.$message.error(error);
      }
    },
    beforeOpen(done, type, index) {
      if (type == "add") {
        this.isEdit = false;
      } else {
        this.isEdit = true;
      }
      done();
    },
    // 获取图片资源id
    
    getImgs(e) {
      this.img_url = e[0];
    },
    // 刷新
    refreshChange() {
      this.getList(this.page);
    },
  },
};
</script>
<style scoped>
</style>